<template>
  <basic-container>
    <el-row>
         <el-col :span="8" style="border: 1px solid #ccc;padding: 10px;border-radius: 10px;">
           <el-row>
              <el-form style="display: inline-block;margin-top: 10px;width:100%;">
                <el-input v-model="searchform.deptName" placeholder="输入部门查询" style="width: 70%;"></el-input>
                <el-button style="padding: 7px;width: 50px;height: 40px;border: 1px solid #ccc;display: inline-block;margin: 0;" icon="el-icon-search" plain  type="primary" @click="searchDept"></el-button>
                <el-button style="padding: 7px;width: 50px;height: 40px;border: 1px solid #ccc;display: inline-block;margin: 0;" icon="el-icon-delete-solid" plain  type="primary" @click="searchClearDept"></el-button>
                <el-button style="padding: 7px;width: 50px;height: 40px;border: 1px solid #ccc;display: inline-block;margin: 0;" icon="el-icon-circle-plus" plain  type="primary" @click="aadDept"></el-button>
              </el-form>
           </el-row>
            <div class="classBox" v-if="deptlistdata.length>0">
              <el-collapse>
              <el-collapse-item v-for="(item,inex) in deptlistdata">
                <template #title>
				        	<h3 class="collapse-title flex" slot="title">{{item.deptName}}</h3>
				        </template>

                <template #right-icon>
				        	<i class="el-icon-arrow-right">123</i>
				        </template>

                <div v-for="(item2,index) in item.children" style="padding: 10px;cursor: pointer;" class="Children">
                  <el-checkbox v-model="item2.checked" @change="changeDept(item2.checked,item2)"></el-checkbox>
                  {{item2.name}}
                </div>
              </el-collapse-item>
            </el-collapse>
            </div>
            <h2 v-else>没有分类标签数据</h2>
         </el-col>
         
         <el-col :span="2" style="text-align: center;">
          <el-row>
            <el-button type="primary" plain icon="el-icon-arrow-left" @click="editDept">添加</el-button>
          </el-row>
          <el-row style="margin-top: 10px;">
            <el-button type="primary" plain icon="el-icon-arrow-right" @click="removeDept">移除</el-button>
          </el-row>
         </el-col>

         <el-col :span="14">
          <avue-crud
             :option="option"
             :table-loading="loading"
             :data="data"
             ref="crud"
             @search-change="searchChange"
             @search-reset="searchReset"
             @selection-change="selectionChange"
             @current-change="currentChange"
             @size-change="sizeChange"
             :page="page"
             @on-load="onload">
           </avue-crud>
         </el-col>
      </el-row>
     
      <el-dialog
    title="添加"
    :visible.sync="dialogVisible"
    icon-class="el-icon-arrow-right"
    width="30%"
    default-expand-all="true"
    :before-close="handleClose" style="overflow: auto;">
    <el-form ref="form" label-width="80px" style="height: 20%;">
  <el-form-item label="部门名">
    <el-input v-model="searchform.deptName" placeholder="输入部门名"></el-input>
  </el-form-item>
  <el-form-item label="备注">
    <el-input v-model="searchform.remark" placeholder="输入备注"></el-input>
  </el-form-item>
  <el-row>
    <el-button icon="el-icon-check" type="primary" style="float: right;" @click="sureDept">确定</el-button>
  </el-row>
    </el-form>
  </el-dialog> 

  <el-dialog
    title="添加"
    :visible.sync="dialogVisible2"
    icon-class="el-icon-arrow-right"
    width="30%"
    default-expand-all="true"
    :before-close="handleClose" style="overflow: auto;">
    <el-form ref="form" label-width="80px" style="height: 20%;">
      <el-table :data="deptlistdata" style="width: 100%">
      <el-table-column prop="id" label="选择部门(只能选择一个)">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isselect"
              active-color="#13ce66"
              inactive-color="#C0CCDA"
              @change="handleStatusChange(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="deptName" label="部门">
      </el-table-column>
    </el-table>
  <el-row>
    <el-button icon="el-icon-check" type="primary" style="float: right;" @click="sureDept2">确定</el-button>
  </el-row>
    </el-form>
  </el-dialog>
  </basic-container>
</template>

<script>
  import {getList, getUserList,inserDept,updateUserdept} from "@/api/system/dept";

  export default {
    data() {
      return {
        searchform:{},
        deptlistdata:[],
        selectionList:[],
        selectDeptId:[],
        removeDeptId:[],
        loading: false,
        dialogVisible:false,
        dialogVisible2:false,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 1
        },
        option: {
          searchShow: true,
              searchMenuSpan: 6,
              tip: false,
              border: true,
              selection: true,
              addBtn:false,    
              delBtn: false,
              menu:false,
              seatch:false,
              editBtn:false,
          column:[
            {
              label:"用户名",
              prop:"name",
              search:true
            },
            {
               label:"手机号",
               prop:"phone"
            },
            {
              label:"性别",
              prop:"sex"
            }
          ]
        },
        data: []
      };
    },
    created(){
       this.selectDepts();  
    }, 
    methods: {
      selectDepts(){
        console.log(this.searchform);
        getList(this.searchform["deptName"]).then(res=>{
           console.log(res);
           if(res.data.code==200){
               this.deptlistdata = res.data.data;
           }
        })
      },
      onload(page,params={}){
        getUserList(page.currentPage,page.pageSize,Object.assign(params,this.query)).then(res=>{
            console.log(res);
            if(res.data.code==200){
              this.data = res.data.data.data;
              this.page.count = res.data.data.count;
            }
        })
      }, 
      aadDept(){
         this.dialogVisible = true;
      },
      searchDept(){
         this.searchform["deptName"] = this.searchform.deptName.trim();
         this.selectDepts();
      },
      searchClearDept(){
        this.searchform={};
        this.selectDepts();
      },
      sureDept(){
         console.log(this.searchform);
         inserDept(this.searchform).then(res=>{
            if(res.data.code==200){
              this.$message.success("添加成功");
              this.searchform = {};
              this.dialogVisible = false;
              this.selectDepts();
              this.onload(this.page);
            }else{
              this.$message.error(res.data.msg);
            }
         })
      },
      sureDept2(){
        if(this.selectionList.length<=0){
            this.$message.error("至少选择一个用户");
            return false;
         }
         if (this.selectDeptId.length<=0) {
            this.$message.error("请选择部门");
            return false;
        }
        if (this.selectDeptId.length>1) {
            this.$message.error("部门只能选择一个");
            return false;
        }
        this.selectionList.forEach(elem=>{
           elem["deptId"]=this.selectDeptId[0];
        })
        updateUserdept(JSON.stringify(this.selectionList)).then(res=>{
            if(res.data.code==200){
              this.$message.success("操作成功");
              this.dialogVisible2=false;
              this.selectionList=[];
             this.selectDeptId=[];
            this.selectDepts();
            this.onload(this.page,{});
            }else{
              this.$message.error(res.data.msg);
            }
        })
      },
      editDept(){
         if(this.selectionList.length<=0){
            this.$message.error("至少选择一个用户");
            return false;
         }
         this.dialogVisible2=true;
      },
      searchReset() {
        this.query = {};
        this.onload(this.page);
      },
      searchChange(params, done) {
        console.log(params);
        this.query = params;
        this.page.currentPage = 1;
        this.onload(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      handleStatusChange(row){
        if(row.isselect){
          this.selectDeptId.push(row.id);
        }else{
          this.selectDeptId=this.selectDeptId.filter(function(item) {
               return item !== row.id;
          })
        }
      },
      changeDept(value,elem){
         if(value){
           this.removeDeptId.push(elem);
         }else{
          this.removeDeptId=this.removeDeptId.filter(function(item) {
               return item.id !== elem.id;
          })
         }
      },
      removeDept(){
         if(this.removeDeptId.length<=0){
            this.$message.error("至少选择一个移除的用户");
            return false;
         }
         this.removeDeptId.forEach(elem=>{
          elem["deptId"] = 0;
        });
        updateUserdept(JSON.stringify(this.removeDeptId)).then(res=>{
            if(res.data.code==200){
              this.$message.success("操作成功");
              this.removeDeptId=[];
             this.selectDepts();
             this.onload(this.page,{});
            }else{
              this.$message.error(res.data.msg);
            }
        })
      }
    }
  };
</script>

<style lang="scss">
.Children:hover{
  color: #0164fe;
  background-color: #f5f7fa;
}

.el-collapse-item__arrow {
	margin-right: 5px;
	font-size: 15px;
	color: #0164fe;
	// &:before {
	// 	// 要替换的icon
	// 	content: '\e620';
	// 	font-family: 'iconfont';
	// 	font-size: 15px;
	// 	font-style: normal;
	// 	color: #0164fe;
	// 	margin-right: 10px;
	// }
}
.el-collapse-item__arrow.is-active {
	transform: rotate(90deg);
	//margin-top: 14px;
	margin-left: -6px;
	margin-right: 10px;
}
.collapse-title {
	height: 44px !important;
	line-height: 44px;
	flex: 1 0 90%;
	order: 1;
	justify-content: space-between;
}
.el-collapse-item__header {
	height: 44px !important;
	flex: 1 0 auto;
	order: -1;
	background: #e7efff;
	padding: 0 20px;
	border-bottom: 1px solid #ffffff;
}
.collapse-title-right {
	span {
		color: #0e64f1;
		cursor: pointer;
		&:hover {
			text-decoration: underline;
		}
	}
}
.el-collapse-item__content {
	padding: 20px;
}
.el-collapse-item__wrap {
	border: none;
}
</style>
